<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>添加用户信息</title>
    <link th:replace="common/header"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap-colorpicker.min.css}"/>
    <script type="text/javascript" th:src="@{/js/androidwheel/androidwheel.js}"></script>
</head>
<body class="no-skin">
<div th:replace="common/top"/>
<div class="main-container ace-save-state" id="main-container">
    <div th:replace="common/menu"/>
    <div class="main-content">
        <div class="main-content-inner">
            <div th:replace="common/title"/>
            <div class="page-content">
                <div th:replace="common/skin"/>
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <form class="form-horizontal" action="" name="form" th:action="@{/sys/sysUser/add}"
                              th:method="post" th:object="${sysUser}">
                            <h3 class="header smaller lighter blue"><i class="fa fa-plus" aria-hidden="true"></i>添加用户信息
                            </h3>
                            <div class="row-fluid">
                                <!--PAGE CONTENT BEGINS HERE-->
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label" for="username">用户名:<span style="color:red">*</span></label>
                                        <div class="controls">
                                            <input type="text" name="username" id="username" class="input_fix"
                                                   placeholder="用户名" th:value="*{username}" maxlength="50"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <span style="color:red"><span th:if="${#fields.hasErrors('username')}"
                                                                  th:errors="*{username}">Name Error</span>&nbsp;</span>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label" for="password">密码:<span style="color:red">*</span></label>
                                        <div class="controls">
                                            <input type="password" name="password" id="password" class="input_fix"
                                                   placeholder="密码" th:value="*{password}" maxlength="50"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <span style="color:red"><span th:if="${#fields.hasErrors('password')}"
                                                                  th:errors="*{password}">Name Error</span>&nbsp;</span>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label" for="email">邮箱:<span
                                                style="color:red">*</span></label>
                                        <div class="controls">
                                            <input type="email" name="email" id="email" class="input_fix"
                                                   placeholder="邮箱" th:value="*{email}" maxlength="50"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <span style="color:red"><span th:if="${#fields.hasErrors('email')}"
                                                                  th:errors="*{email}">Name Error</span>&nbsp;</span>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label" for="phone">联系电话:<span
                                                style="color:red">*</span></label>
                                        <div class="controls">
                                            <input type="text" name="phone" id="phone" class="input_fix"
                                                   placeholder="联系电话" th:value="*{phone}" maxlength="50"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <span style="color:red"><span th:if="${#fields.hasErrors('phone')}"
                                                                  th:errors="*{phone}">Name Error</span>&nbsp;</span>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label" for="province">省-市-区:<span
                                                style="color:red">*</span></label>
                                        <div class="controls">
                                            <select th:field="*{province}" id="province" name="province"
                                                    class="input_fix"
                                                    th:onchange="'provinceChange(this.value, null, \'--请选择--\')'"
                                                    th:onclick="'provinceChange(this.value, null, \'--请选择--\')'">
                                                <option value="">--请选择--</option>
                                                <option th:each="province : ${provinceList}"
                                                        th:value="${province.provinceCode}"
                                                        th:text="${province.provinceName}">山东
                                                </option>
                                            </select>
                                            <select th:field="*{city}" id="city" name="city" class="input_fix"
                                                    th:onchange="'cityChange(this.value, null, \'--请选择--\')'"
                                                    th:onclick="'cityChange(this.value, null, \'--请选择--\')'">
                                                <option value="">--请选择--</option>
                                                <option th:each="city : ${cityList}"
                                                        th:value="${city.cityCode}" th:text="${city.cityName}">山东
                                                </option>
                                            </select>
                                            <select th:field="*{region}" id="region" name="region" class="input_fix">
                                                <option value="">--请选择--</option>
                                                <option th:each="region : ${regionList}"
                                                        th:value="${region.regionCode}" th:text="${region.regionName}">
                                                    山东
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <span style="color:red">
                                        <span th:if="${#fields.hasErrors('province')}" th:errors="*{province}">Name Error</span>
                                        <span th:if="${#fields.hasErrors('city')}" th:errors="*{city}">Name Error</span>
                                        <span th:if="${#fields.hasErrors('region')}"
                                              th:errors="*{region}">Name Error</span>
                                        &nbsp;</span>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label" for="address">地址:<span
                                                style="color:red">*</span></label>
                                        <div class="controls">
                                            <input type="text" name="address" id="address" class="input_fix"
                                                   placeholder="地址" th:value="*{address}" maxlength="50"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <span style="color:red"><span th:if="${#fields.hasErrors('address')}"
                                                                  th:errors="*{address}">Name Error</span>&nbsp;</span>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label" for="type">用户类型:<span
                                                style="color:red">*</span></label>
                                        <div class="controls">
                                            <select th:field="*{type}" th:value="*{type}" id="type" name="type"
                                                    class="input_fix">
                                                <option value="false">后台用户</option>
                                                <option value="true">前台用户</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <span style="color:red"><span th:if="${#fields.hasErrors('password')}"
                                                                  th:errors="*{password}">Name Error</span>&nbsp;</span>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label" for="backColor">背景色:<span
                                                style="color:red">*</span></label>
                                        <div class="controls">
                                            <select id="backColor" name="backColor" class="hide" th:value="${backColor}"
                                                    th:field="*{backColor}">
                                                <option value="#ac725e">#ac725e</option>
                                                <option value="#d06b64">#d06b64</option>
                                                <option value="#f83a22">#f83a22</option>
                                                <option value="#fa573c">#fa573c</option>
                                                <option value="#ff7537">#ff7537</option>
                                                <option value="#ffad46">#ffad46</option>
                                                <option value="#42d692">#42d692</option>
                                                <option value="#16a765">#16a765</option>
                                                <option value="#7bd148">#7bd148</option>
                                                <option value="#b3dc6c">#b3dc6c</option>
                                                <option value="#fbe983">#fbe983</option>
                                                <option value="#fad165">#fad165</option>
                                                <option value="#92e1c0">#92e1c0</option>
                                                <option value="#9fe1e7">#9fe1e7</option>
                                                <option value="#9fc6e7">#9fc6e7</option>
                                                <option value="#4986e7">#4986e7</option>
                                                <option value="#9a9cff">#9a9cff</option>
                                                <option value="#b99aff">#b99aff</option>
                                                <option value="#c2c2c2">#c2c2c2</option>
                                                <option value="#cabdbf">#cabdbf</option>
                                                <option value="#cca6ac">#cca6ac</option>
                                                <option value="#f691b2">#f691b2</option>
                                                <option value="#cd74e6">#cd74e6</option>
                                                <option value="#a47ae2">#a47ae2</option>
                                                <option value="#555">#555</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <span style="color:red"><span th:if="${#fields.hasErrors('backColor')}"
                                                                  th:errors="*{backColor}">Name Error</span>&nbsp;</span>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label" for="fontColor">字体颜色:<span
                                                style="color:red">*</span></label>
                                        <div class="controls">
                                            <select id="fontColor" name="fontColor" class="hide" th:value="${fontColor}"
                                                    th:field="*{fontColor}">
                                                <option value="#ac725e">#ac725e</option>
                                                <option value="#d06b64">#d06b64</option>
                                                <option value="#f83a22">#f83a22</option>
                                                <option value="#fa573c">#fa573c</option>
                                                <option value="#ff7537">#ff7537</option>
                                                <option value="#ffad46">#ffad46</option>
                                                <option value="#42d692">#42d692</option>
                                                <option value="#16a765">#16a765</option>
                                                <option value="#7bd148">#7bd148</option>
                                                <option value="#b3dc6c">#b3dc6c</option>
                                                <option value="#fbe983">#fbe983</option>
                                                <option value="#fad165">#fad165</option>
                                                <option value="#92e1c0">#92e1c0</option>
                                                <option value="#9fe1e7">#9fe1e7</option>
                                                <option value="#9fc6e7">#9fc6e7</option>
                                                <option value="#4986e7">#4986e7</option>
                                                <option value="#9a9cff">#9a9cff</option>
                                                <option value="#b99aff">#b99aff</option>
                                                <option value="#c2c2c2">#c2c2c2</option>
                                                <option value="#cabdbf">#cabdbf</option>
                                                <option value="#cca6ac">#cca6ac</option>
                                                <option value="#f691b2">#f691b2</option>
                                                <option value="#cd74e6">#cd74e6</option>
                                                <option value="#a47ae2">#a47ae2</option>
                                                <option value="#555">#555</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <span style="color:red"><span th:if="${#fields.hasErrors('fontColor')}"
                                                                  th:errors="*{fontColor}">Name Error</span>&nbsp;</span>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="text-center span12">
                                    <button shiro:hasPermission="/sys/sysUser/add" class="btn btn-primary"
                                            type="submit"><i class="fa fa-floppy-o" aria-hidden="true"></i>提交
                                    </button>
                                    <button shiro:hasPermission="/sys/sysUser/add" class="btn btn-danger" type="reset">
                                        <i class="fa fa-times" aria-hidden="true"></i>取消
                                    </button>
                                    <a shiro:hasPermission="/sys/sysUser/getAll" class="btn" href=""
                                       th:href="@{/sys/sysUser/getAll}"><i class="fa fa-reply" aria-hidden="true"></i>返回</a>
                                </div>
                            </div>
                        </form>
                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->
    <div th:replace="common/footer"/>
</div><!-- /.main-container -->
<div th:replace="common/buttom"/>
<script th:src="@{/js/colorpicker/bootstrap-colorpicker.min.js}"></script>
<script type="text/javascript">
    jQuery(function ($) {
        $('#backColor').ace_colorpicker();
        $('#fontColor').ace_colorpicker();
    });
    $("form").submit(function () {
        $(":submit", this).attr("disabled", "disabled");
    });
</script>
</body>
</html>
